<template>
	<view>
		<Header :isBack="true" v-if="isnapp">
			<block slot="content">{{title}}</block>
		</Header>

		<scroll-view scroll-y="true" v-if="isLoaded">
			<view class="title-box title-head">
				<view class="title-logo" style="width: 96upx;height: 96upx;">
					<image class="title-img" src="/static/images/touxiang11.png" style="width: 100%;height: 100%;">
					</image>
				</view>
				<view class="title-content">
					<view class="">
						{{vedio_title}}
					</view>
					<view class="" style="font-size: 26upx;color: #999999;">
						<image src="/static/images/yixuexi.png" mode=""
							style="width: 28upx;height: 26upx;margin-right: 22upx;"></image>
						<text style="margin-right: 30upx;">已累计播放{{view_num}}次</text>
						<text>{{created_at}}</text>
					</view>
				</view>
			</view>
			<view class="video">
				<video v-if="isPlay" autoplay :src="videoSrc" object-fit="fill"
					style="width: 100%;height: 100%;"></video>
				<view v-else class="" style="width:100%;height: 100%;">
					<image :src="imgSrc" style="width: 100%;height: 100%;"></image>
					<image src="@/static/images/bofang1.png" mode=""
						style="width: 26rpx;height:26rpx;position: absolute;top:50%;left: 50%;">
					</image>
					<view class="duration">
						<text>{{duration_time}}</text>
					</view>
				</view>
			</view>

			<view class="title-box" style="display: block;">
				<view class="title" style="margin-bottom: 0;">
					<image class="title-img" src="/static/images/zuogang.png"></image>
					<text class="title2">最新</text>
				</view>
				<view class="">
					<view class="list-item" v-for="item in freeVideos" :key="item.id">
						<image :src="item.free_url" mode="" class="list-item-img"
							style="width: 146upx;height: 190upx;margin-right: 26upx;"></image>
						<view class="list-item-content" style="line-height: 63upx;">
							<view class="">
								{{item.title}}
							</view>
							<view class="" style="font-size: 26upx;color: #535656;">
								{{item.title}}
							</view>
							<view class="" style="font-size: 26upx;color: #999999;">
								<image src="/static/images/yixuexi.png" mode=""
									style="width: 28upx;height: 26upx;margin-right: 22upx;"></image>
								<text style="margin-right: 40upx;">{{item.view_num}}人已学习</text>
							</view>
							<view class="check-info" @tap="checkInfo(item.id)">
								查看
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- <view class="buttons">
			<view class="buttons1" v-if="isCollect == 0" @tap="addCollect" :style="{width:width}">
				<image class="buttons-img" src="@/static/images/soucahng1.png" alt=""></image>
				<view class="">
					收藏
				</view>
			</view>

			<view class="buttons1" v-if="isCollect == 1" @tap="delCollect" :style="{width:width}">
				<image class="buttons-img" src="@/static/images/soucahng2.png" alt=""></image>
				<view class="" style="color:#b8481d">
					取消收藏
				</view>
			</view>

			<view class="buttons2" style="width:50%;" @tap="playStart" v-show="isShow">
				立即学习
			</view>

			<view class="buttons3" :style="{width:width}" @tap="goShare">
				<image class="buttons-img" src="@/static/images/fenxiang.png" alt=""></image>
				<view class="">
					分享
				</view>
			</view>
		</view> -->

		<!-- <view class="mark2" v-show="isShowShare">
			<view class="banks-list">
				<view class="banks-list-title">
					<text>分享</text>
					<image src="@/static/images/guanbi.png"
						style="width:23rpx;height:23rpx;position: absolute;right:50rpx;" @tap="cancle"></image>
				</view>
				<view class="banks-list-content">
					<view class="banks-list1">
						<view class="banks-list1-item" @tap="haoyou">
							<image class="images" src="/static/images/weixin.png"></image>
							<text class="texts">微信好友</text>
						</view>
						<view class="banks-list1-item" @tap="pengyouquan">
							<image class="images" src="/static/images/pengyouquan.png"></image>
							<text class="texts">朋友圈</text>
						</view>
						<view class="banks-list1-item" @tap="copyUrl">
							<image class="images" src="/static/images/fuzhilianjie.png"></image>
							<text class="texts">复制链接</text>
						</view>
					</view>
					<view class="banks-list2">
						<view class="banks-list2-cancle" @tap="cancle">取消</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="alertDialog1" type="dialog">
			<uni-popup-dialog :type="msgType" title="下载确认" content="" @confirm="dialogConfirm1">
				<view class="remember">
					浏览器暂不支持该功能，请下载app
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertDialog2" type="dialog">
			<uni-popup-dialog :type="msgType" title="分享确认" content="">
				<view style="font-size: 30rpx;">
					微信内置浏览器暂不支持该功能，若要分享，请点击右上角 <image src="/static/images/tupiansandian.png" alt=""
						style="width:68rpx;height:34rpx;margin:0 10rpx;">选择分享
				</view>
			</uni-popup-dialog>
		</uni-popup>
 -->
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				title: '教学视频',
				id: 0,
				isLoaded: false,
				cate: 0,

				duration_time: '',
				view_num: 0,
				imgSrc: '',
				videoSrc: '',
				vedio_title: '',
				introduce: '',
				regtime: '',
				created_at: '',

				//收藏
				isCollect: 0,
				isShowShare: false,
				msgType: 'info',

				isnapp: true,
				isPlay: true,

				freeVideos: [],

				// videoId: '',
				// VideoContext: {},

				isShow: true,
				width: '25%',

				playbtn: true
			}
		},

		// created() {
		// 	this.videoId = Date.now() + Math.ceil(Math.random() * 10000000) + "";
		// },

		// mounted() {
		// 	this.VideoContext = uni.createVideoContext(this.videoId)
		// },

		components: {

		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.getInfo(this.uid);

			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)
		},

		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},

		onPageScroll: function(Object) {
			// console.log(Object.scrollTop)
			if (Object.scrollTop >= 90) {
				this.isnapp = false;
			} else {
				this.isnapp = true;
			}
		},

		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			// console.log(option);
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.id = option.id

			uni.showLoading({
				title: '加载中...'
			});
			this.getInfo(this.id);
			this.isLoaded = true;
			this.getFree();
			uni.hideLoading();

		},
		methods: {
			async getInfo(id) {
				let token = uni.getStorageSync('token');
				let infoObj = await this.$myRequest({
					url: '/getVedioInfo',
					data: {
						token: token,
						id: id
					},
					methods: 'POST'
				})

				let userInfo = infoObj.data.data;
				if (userInfo.title) {
					this.vedio_title = userInfo.title
				}

				if (userInfo.introduce) {
					this.introduce = userInfo.introduce
				}

				this.duration_time = userInfo.duration_time
				this.imgSrc = userInfo.img_url
				this.videoSrc = userInfo.video_url
				this.view_num = userInfo.view_num
				this.created_at = userInfo.created_at

				this.cate = uni.getStorageSync('cate')

				let res = await this.$myRequest({
					url: '/isCollectVideo',
					data: {
						token: token,
						cate: this.cate,
						video_id: id
					},
					methods: 'POST'
				})

				if (res.data && res.data.data == 1) {
					this.isCollect = 1
				}
			},

			async getFree() {
				let fdata = await this.$myRequest({
					url: '/freeVideos',
					data: {

					},
					methods: 'POST'
				})

				this.freeVideos = fdata.data.data;
				// console.log(this.freeVideos)
			},

			async addCollect() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return false;
				}

				let res = await this.$myRequest({
					url: '/addCollectVideo',
					data: {
						token: uni.getStorageSync('token'),
						cate: this.cate,
						video_id: this.id
					},
					methods: 'post'
				})
				if (res.data.status >= 1) {
					this.isCollect = 1;

					uni.$emit('changeCollectionVideos');
				}

				this.$api.msg(res.data.msg)
			},

			async delCollect() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return false;
				}

				let res = await this.$myRequest({
					url: '/delCollectVideo',
					data: {
						token: uni.getStorageSync('token'),
						cate: this.cate,
						video_id: this.id
					},
					methods: 'post'
				})
				if (res.data.status >= 1) {
					this.isCollect = 0;

					uni.$emit('changeCollectionVideos');
				}

				this.$api.msg(res.data.msg)
			},

			async playStart() {
				this.isPlay = true;
				// this.VideoContext.play()
				this.isShow = false;
				this.width = '50%'

				let res = await this.$myRequest({
					url: '/addVideoNum',
					data: {
						video_id: this.id
					},
					methods: 'post'
				})

				if (res.data.status == 1) {
					uni.$emit('changePlayNum')
				}
			},

			async checkInfo(id) {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages5/pages/videos/video-detail?id=' + id
				})
			},

			//分享
			async goShare() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				// #ifdef APP-PLUS
				this.isShowShare = true;
				// #endif

				// #ifdef H5
				if (this.$wechat && this.$wechat.isWechat()) {
					let locationHref = {
						url: window.location.href
					};

					let res = await this.$myRequest({
						url: '/getWxInfo',
						data: locationHref
					})

					if (res.data.status) {
						var jweixin = this.$wx

						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.data.signature, // 必填，签名，见微信开发文档附录1
							jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
						});
						jweixin.ready(() => {
							// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
							//分享至微信好友
							jweixin.updateAppMessageShareData({
								title: "好友分享", // 分享标题
								desc: "好友分享", // 分享描述
								link: this.webUrl +
									"pages6/pages/my/my", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: "https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png", // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户点击了分享后执行的回调函数
									// console.log('分享给好友');

								}
							});
							//分享朋友圈
							jweixin.updateTimelineShareData({
								title: "好友分享", // 分享标题
								link: this.webUrl + "pages6/pages/my/my", // 分享链接
								imgUrl: "https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png", // 分享图标
								success: function() {
									// 用户确认分享后执行的回调函数
									// console.log('分享到朋友圈');
								},

							});

						});
						jweixin.error(function(res) {
							// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
							console.log('验证失败');
							console.log(res);
						});

						this.$refs.alertDialog2.open()
					}
				} else {
					this.$refs.alertDialog1.open()
				}
				// #endif
			},

			//浏览器中下载app
			async dialogConfirm1() {
				window.location.href = "https://test.hnliandesy.com/loading.html"
			},

			async contract() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				this.$api.msg('正在开发中！')
			},

			//取消
			async cancle() {
				this.isShowShare = false;
			},

			async haoyou() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.webUrl + "pages6/pages/my/my",
					title: "好友分享",
					summary: "好友分享",
					imageUrl: "https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png",
					success: (res) => {
						this.$api.msg('分享成功', 'success');
					},
					fail: (err) => {
						this.$api.msg(JSON.stringify(err));
					}
				});
			},

			async pengyouquan() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: this.webUrl + "pages6/pages/my/my",
					title: "好友分享",
					summary: "好友分享",
					imageUrl: "https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png",
					success: (res) => {
						this.$api.msg('分享成功', 'success');
					},
					fail: (err) => {
						this.$api.msg(JSON.stringify(err));
					}
				});
			},

			async copyUrl() {
				uni.setClipboardData({
					//准备复制的数据
					data: this.webUrl + "pages6/pages/my/my",
					success: (res) => {
						this.$api.msg('复制成功！')
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.title-head {
		// #ifdef APP-PLUS
		margin-top: 178rpx !important;
		// #endif

		// #ifdef H5
		margin-top: 120rpx !important;
		// #endif

		// #ifdef MP-WEIXIN
		margin-top: 178rpx !important;
		// #endif
	}

	.video {
		width: 750upx;
		height: 422upx;
		position: relative;
		font-size: $font-base;

		.duration {
			position: absolute;
			right: 0;
			bottom: 0;
			color: #fff;
			padding: 10rpx 12rpx;
			background: rgba($color: #000000, $alpha: 0.4);
			border-top-left-radius: 10rpx;
		}
	}

	.title-box {
		background-color: #fff;
		padding: 32rpx;
		font-size: $font-base;
		display: flex;
		width: 96%;
		margin: 20upx 2%;
		border-radius: 15upx;

		.title {
			margin-bottom: 20rpx;

			.title-img {
				width: 6rpx;
				height: 27rpx;
				margin-right: 21rpx;
			}

			.title2 {
				height: 42rpx;
				color: #333;
				font-size: 30rpx;
				/* font-weight: bold; */
			}

		}

		.title-content {
			padding-left: 22rpx;
			letter-spacing: 2upx;
			line-height: 48rpx;
		}

		.introduce {
			padding: 31rpx 44rpx;
			background-color: #fff;
			line-height: 48rpx;
			font-size: $font-base !important;
			color: #676767;
			text-indent: 2em;
			/*两端对齐*/
			text-align: justify;
		}

	}

	.list-item {
		padding: 32upx 0;
		display: flex;
		border-bottom: 2upx solid #f7f7f7;
		position: relative;
	}

	.check-info {
		width: 88upx;
		height: 48upx;
		color: #4d90fb;
		border: 2upx solid #4d90fb;
		border-radius: 24upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		top: 108upx;
	}

	.buttons {
		width: 100%;
		height: 148rpx;
		background-color: #f8f8f8;
		position: fixed;
		bottom: 0;

		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-base;

		.buttons1,
		.buttons3 {
			display: flex;
			flex-direction: column;
			align-items: center;
			/* justify-content: center; */
			height: 148rpx;
			line-height: 148rpx;
			padding-top: 30rpx;
		}

		.buttons2 {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			/* justify-content: center; */
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 30rpx;
			background-color: #f2451a;
			color: #fff;
		}

		.buttons-img {
			/* display: block; */
			position: fixed;
			width: 42rpx;
			height: 35rpx;
		}
	}

	.mark2 {
		z-index: 100;
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0rpx;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 2px -3px 100px -5px #FFFFFF;
		font-size: $font-base;

		.banks-list {
			position: absolute;
			height: 496rpx;
			bottom: 0rpx;
			background-color: #fff;
			width: 100%;

			.banks-list-title {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #ebebeb;
				position: relative;
			}

			.banks-list-content {
				.banks-list1 {
					height: 230rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					margin: 0 66rpx;

					.banks-list1-item {
						width: 33.3%;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}

				.banks-list2 {
					position: relative;
					height: 176rpx;
					border-top: 1px solid #f3f3f6;

					.banks-list2-cancle {
						position: absolute;
						margin: auto;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;

						width: 80%;
						background-color: #f2451a;
						color: #fff;
						height: 82rpx;
						border-radius: 82rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

			}

			.banks-list-button {
				padding-top: 20rpx;
				display: flex;
				justify-content: center;
			}

			.images {
				width: 102rpx;
				height: 102rpx;
			}

			.texts {
				margin-top: 20rpx;
				color: #737373
			}

		}
	}
</style>
